<template>
  <q-page :style-fn="styFn">
    <q-scroll-area :style="{ height: pageHeight + 'px' }">
      <div class="q-pa-sm">
        <card-social icon_position="left" />
        <q-separator spaced inset vertical dark />
        <card-social icon_position="right" />
        <card-charts2></card-charts2>
        <q-card class="q-mt-sm no-shadow" bordered>
          <q-card-section class="text-h6 q-pb-none">
            <q-item>
              <q-item-section avatar class="">
                <q-icon color="blue" name="fa fa-shopping-cart" size="44px" />
              </q-item-section>
              <q-item-section>
                <q-item-label>
                  <div class="text-h6">最近</div>
                </q-item-label>
                <q-item-label caption class="text-black"> 详情 </q-item-label>
              </q-item-section>
            </q-item>
          </q-card-section>
          <q-card-section class="q-pa-none q-ma-none">
            <q-scroll-area style="height: 300px">
              <q-table
                class="no-shadow no-border"
                :rows="sales_data"
                :columns="sales_column"
                hide-bottom
              >
                <template v-slot:body-cell-Products="props">
                  <q-td :props="props">
                    <q-item>
                      <q-item-section>
                        <q-avatar square>
                          <img :src="props.row.prod_img" />
                        </q-avatar>
                      </q-item-section>

                      <q-item-section>
                        <q-item-label>{{ props.row.code }}</q-item-label>
                        <q-item-label>{{
                          props.row.product_name
                        }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-td>
                </template>
                <template v-slot:body-cell-Name="props">
                  <q-td :props="props">
                    <q-item>
                      <q-item-section avatar>
                        <q-avatar>
                          <img :src="props.row.avatar" />
                        </q-avatar>
                      </q-item-section>

                      <q-item-section>
                        <q-item-label>{{ props.row.name }}</q-item-label>
                        <q-item-label caption class=""
                          >购买日期: <br />{{ props.row.date }}</q-item-label
                        >
                      </q-item-section>
                    </q-item>
                  </q-td>
                </template>
                <template v-slot:body-cell-Status="props">
                  <q-td :props="props" class="text-left">
                    <q-chip
                      class="text-white text-capitalize"
                      :label="props.row.status"
                      :color="getChipColor(props.row.status)"
                    ></q-chip>
                  </q-td>
                </template>
                <template v-slot:body-cell-Stock="props">
                  <q-td :props="props">
                    <q-item>
                      <q-item-section>
                        <q-item-label>
                          <span class="text-blue">
                            <q-icon
                              name="bug_report"
                              color="blue"
                              size="20px"
                              v-if="props.row.type == 'error'"
                            ></q-icon>
                            <q-icon
                              name="settings"
                              color="blue"
                              size="20px"
                              v-if="props.row.type == 'info'"
                            ></q-icon>
                            <q-icon
                              name="flag"
                              color="blue"
                              size="20px"
                              v-if="props.row.type == 'success'"
                            ></q-icon>
                            <q-icon
                              name="fireplace"
                              color="blue"
                              size="20px"
                              v-if="props.row.type == 'warning'"
                            ></q-icon>
                            {{ props.row.stock }}
                          </span>
                          <q-chip
                            class="float-right text-white text-capitalize"
                            :label="props.row.type"
                            color="positive"
                            v-if="props.row.type == 'success'"
                          ></q-chip>
                          <q-chip
                            class="float-right text-white text-capitalize"
                            :label="props.row.type"
                            color="info"
                            v-if="props.row.type == 'info'"
                          ></q-chip>
                          <q-chip
                            class="float-right text-white text-capitalize"
                            :label="props.row.type"
                            color="warning"
                            v-if="props.row.type == 'warning'"
                          ></q-chip>
                          <q-chip
                            class="float-right text-white text-capitalize"
                            :label="props.row.type"
                            color="negative"
                            v-if="props.row.type == 'error'"
                          ></q-chip>
                        </q-item-label>
                        <q-item-label caption class="">
                          <q-linear-progress
                            dark
                            :color="getColor(props.row.Progress)"
                            :value="props.row.Progress / 100"
                          />
                        </q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-td>
                </template>
              </q-table>
            </q-scroll-area>
          </q-card-section>
        </q-card>

        <div class="row q-col-gutter-sm q-py-sm">
          <tab-social />
          <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-carousel
              animated
              v-model="slide"
              infinite
              height="360px"
              arrows
              transition-prev="slide-right"
              transition-next="slide-left"
            >
              <q-carousel-slide :name="1" class="q-pa-none">
                <q-scroll-area class="fit">
                  <q-card class="my-card">
                    <img :src="baseImg" width="100%" />

                    <q-card-section>
                      <div class="text-h6">做自己热爱的事</div>
                      <div class="text-subtitle2">小王</div>
                    </q-card-section>

                    <q-card-actions align="left">
                      <q-btn
                        label="分享"
                        dense
                        color="primary"
                        text-color="blue"
                        outline
                      />
                      <q-btn
                        label="加载更多"
                        dense
                        color="primary"
                        text-color="blue"
                        outline
                      />
                    </q-card-actions>
                  </q-card>
                </q-scroll-area>
              </q-carousel-slide>
              <q-carousel-slide :name="2" class="q-pa-none">
                <q-scroll-area class="fit">
                  <q-card class="my-card">
                    <img :src="baseImg2" width="100%" />

                    <q-card-section>
                      <div class="text-h6">正确安排你的行程</div>
                      <div class="text-subtitle2">每种生活方式都值得尊重</div>
                    </q-card-section>

                    <q-card-actions align="left">
                      <q-btn
                        label="分享"
                        dense
                        color="primary"
                        text-color="blue"
                        outline
                      />
                      <q-btn
                        label="加载更多"
                        dense
                        color="primary"
                        text-color="blue"
                        outline
                      />
                    </q-card-actions>
                  </q-card>
                </q-scroll-area>
              </q-carousel-slide>
              <q-carousel-slide :name="3" class="q-pa-none">
                <q-scroll-area class="fit">
                  <q-card class="my-card">
                    <img :src="baseImg3" width="100%" />

                    <q-card-section>
                      <div class="text-h6">有机会就去旅行</div>
                      <div class="text-subtitle2">你所热爱的, 就是你的生活</div>
                    </q-card-section>

                    <q-card-actions align="left">
                      <q-btn
                        label="分享"
                        dense
                        color="primary"
                        text-color="blue"
                        outline
                      />
                      <q-btn
                        label="加载更多"
                        dense
                        color="primary"
                        text-color="blue"
                        outline
                      />
                    </q-card-actions>
                  </q-card>
                </q-scroll-area>
              </q-carousel-slide>
            </q-carousel>
          </div>
        </div>
      </div>
    </q-scroll-area>
  </q-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  preFetch(param) {
    console.log('param: ', param);
  },
});
</script>

<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue';
import { QTableProps } from 'quasar';
import { baseImg, baseImg2, baseImg3, sales_data } from './data/list';
const pageHeight = ref(400);
const styFn = (offset: number, height: number) => {
  pageHeight.value = height - offset;
};
const CardSocial = defineAsyncComponent(
  () => import('components/cards/CardSocial.vue')
);
const CardCharts2 = defineAsyncComponent(
  () => import('components/cards/CardCharts2.vue')
);
const TabSocial = defineAsyncComponent(
  () => import('components/tabs/TabSocial.vue')
);

const sales_column: QTableProps['columns'] = [
  {
    name: 'Products',
    label: '产品',
    field: 'Products',
    sortable: true,
    align: 'left',
  },
  {
    name: 'Name',
    label: '购买人',
    field: 'name',
    sortable: true,
    align: 'left',
  },
  {
    name: 'Total',
    label: '总额',
    field: 'total',
    sortable: true,
    align: 'right',
    classes: 'text-bold',
  },
  {
    name: 'Status',
    label: '状态',
    field: 'status',
    sortable: true,
    align: 'left',
    classes: 'text-bold',
  },
  {
    name: 'Stock',
    label: '余量',
    field: 'task',
    sortable: true,
    align: 'left',
  },
];

const slide = ref(1);

const getColor = (val: number) => {
  if (val > 70 && val <= 100) {
    return 'green';
  } else if (val > 50 && val <= 70) {
    return 'blue';
  }
  return 'red';
};
const getChipColor = (status: string) => {
  if (status == '关闭') {
    return 'negative';
  } else if (status == '发送') {
    return 'positive';
  } else if (status == '等待') {
    return 'warning';
  } else if (status == '已付费') {
    return 'info';
  } else {
    return 'dark';
  }
};
</script>

<style scoped></style>
